<template>
  <div class="ToolBar-container">
    <div
      v-for="menu in filteredMenuList"
      :key="menu.selected"
    >
      <div
        v-if="!menu.isSubMenu"
        :title="menu.title"
        class="tool-btn base-btn"
        @click="updateSelectedFn(menu.selected, 1, { unSelected: menu.unSelected })"
      >
        <img
          :src="checkSelectedFn(menu.selected, 1) && !menu.unPick ? menu.pickImg : menu.normalImg"
          alt
        >
      </div>
      <template v-else-if="menu.isSubMenu && menu.type==='thumbtack'">
        <a-popover>
            <div
                    title="图钉"
                 class="tool-btn base-btn"
                 @click="updateSelectedFn(menu.selected, 1, { unSelected: menu.unSelected })"
            >
              <img
                      :src="checkSelectedFn(menu.selected, 1) && !menu.unPick ? menu.pickImg : menu.normalImg"
                      alt
              >
            </div>
          <template #content>
            <div
                    v-for="item in menu.children"
                    :key="item.selected"
                    @click="updateSelectedFn(item.selected, 2, { parentKey: menu.selected })"
            >
              <div class="subMenu measureMenu" style="padding-bottom: 10px">
                <a-checkbox v-model:checked="item.check"></a-checkbox>
                <span
                        :class="
                    checkSelectedFn(item.selected, 2) && !item.unPick ? 'subMenu-text selected' : 'subMenu-text'
                  "
                >{{ item.title }}</span>
              </div>
            </div>
            <div style="margin-top: 15px">
              <a-button size="small" style="margin-right: 10px" @click="resetTumbtack(menu.children)">重置</a-button>
              <a-button type="primary" size="small" @click="setThumbtack(menu.children)">确定</a-button>
            </div>
          </template>
        </a-popover>

      </template>
      <a-dropdown
        v-else
        :title="menu.title"
        :trigger="['hover']"
        placement="topCenter"
      >
        <div
          class="tool-btn base-btn"
          @click="updateSelectedFn(menu.selected, 1, { unSelected: menu.unSelected })"
        >
          <img
            :src="checkSelectedFn(menu.selected, 1) && !menu.unPick ? menu.pickImg : menu.normalImg"
            alt
          >
        </div>
        <a-menu slot="overlay">
          <!-- 测量 -->
          <template v-if="menu.selected === 'measure'">
            <a-menu-item
              v-for="item in menu.children"
              :key="item.selected"
              @click="updateSelectedFn(item.selected, 2, { parentKey: menu.selected })"
            >
              <div class="subMenu measureMenu">
                <img
                  class="subMenu-img"
                  :src="checkSelectedFn(item.selected, 2) && !item.unPick ? item.pickImg : item.normalImg"
                  alt
                >
                <span
                  :class="
                    checkSelectedFn(item.selected, 2) && !item.unPick ? 'subMenu-text selected' : 'subMenu-text'
                  "
                >{{ item.title }}</span>
              </div>
            </a-menu-item>
          </template>
          <!-- 定位 -->
          <template v-if="menu.selected === 'position'">
            <a-menu-item>
              <a-checkbox-group>
                <div
                  class="position-row"
                  @click="updateSelectedFn('project', 2, { parentKey: menu.selected })"
                >
                  <a-checkbox>工程问题</a-checkbox>
                </div>
                <div class="position-row">
                  <a-checkbox>表单管理</a-checkbox>
                </div>
                <div class="position-row">
                  <a-checkbox>安全问题</a-checkbox>
                </div>
                <div class="position-row">
                  <a-checkbox>质量问题</a-checkbox>
                </div>
              </a-checkbox-group>
            </a-menu-item>
            <a-menu-item>
              <span class="base-btn">重置</span>
              <a-button
                class="base-btn"
                style="margin-left: 10px"
              >
                确定
              </a-button>
            </a-menu-item>
          </template>
          <!-- 漫游 -->
          <template v-if="menu.selected === 'roaming'">
            <a-menu-item
              v-for="item in menu.children"
              :key="item.selected"
              @click="updateSelectedFn(item.selected, 2, { parentKey: menu.selected })"
            >
              <div class="subMenu measureMenu">
                <img
                  class="subMenu-img"
                  :src="checkSelectedFn(item.selected, 2) && !item.unPick ? item.pickImg : item.normalImg"
                  alt
                >
                <span
                  :class="
                    checkSelectedFn(item.selected, 2) && !item.unPick ? 'subMenu-text selected' : 'subMenu-text'
                  "
                >{{ item.title }}</span>
              </div>
            </a-menu-item>
          </template>
          <template v-if="menu.selected === 'thumbtack'">
            <a-menu-item
                    v-for="item in menu.children"
                    :key="item.selected"
                    @click="updateSelectedFn(item.selected, 2, { parentKey: menu.selected })"
            >
              <div class="subMenu measureMenu">
                <a-checkbox v-model:checked="item.check"></a-checkbox>
                <span
                        :class="
                    checkSelectedFn(item.selected, 2) && !item.unPick ? 'subMenu-text selected' : 'subMenu-text'
                  "
                >{{ item.title }}</span>
              </div>
            </a-menu-item>
          </template>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { menuBlock } from '../menuConfig'
export default {
  props: {
    excludeTool: {
      // 不显示的tool项，eg：['switchModel']
      type: Array,
      default: () => ['switchModel']
    },
    // 检查是否选中的函数
    checkSelectedFn: {
      type: Function,
      default() {
        return () => false
      }
    },
    // 更新选中的函数
    updateSelectedFn: {
      type: Function,
      default() {
        return () => false
      }
    }
  },
  data() {
    return {
      menuList: menuBlock
    }
  },
  computed: {
    filteredMenuList() {
      const list = this.menuList.filter((item) => {
        return !this.excludeTool.includes(item.selected)
      })
      console.log(list)
      return list
    }
  },
  methods: {
    setThumbtack(val) {
      const names = []
      val.forEach(item => {
        if(item.check) {
          names.push(item.title)
        }
      })
      this.$emit('setThumbtack', names)
    },
    // 重置
    resetTumbtack(val) {
      val.forEach(item => {
        item.check = false
      })
      this.$forceUpdate()
      this.$emit('resetTumbtack')
    }
  }
}
</script>

<style lang="less" scoped>
.ToolBar-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>